<template>
  <div class="dcy-content">
    <div class="module-tree-table">
      <tree-table
        stripe
        border
        :is-fold="false"
        :expand-type="false"
        :selectable="false"
        :columns="columns"
        :data="data" style="font-size: 14px">
        <template slot="type" slot-scope="{row,index}">
          <Tag color="primary" v-if="row.type === '0'">模块</Tag>
          <Tag color="warning" v-if="row.type === '1'">操作</Tag>
        </template>
        <template slot="httpMethod" slot-scope="{row,index}">
          <Tag color="green" v-if="row.httpMethod === 'GET'">GET</Tag>
          <Tag color="blue" v-if="row.httpMethod === 'POST'">POST</Tag>
        </template>
        <template slot="moduleStatus" slot-scope="{row,index}">
          <Tag color="success" v-if="row.moduleStatus === '0'">正常</Tag>
          <Tag color="error" v-if="row.moduleStatus === '1'">禁用</Tag>
        </template>
        <template slot="action" slot-scope="{row,index}">
          <a @click="addModule(row)">添加</a>
          <Divider type="vertical"/>
          <a @click="updModule(row)">修改</a>
          <Divider type="vertical" v-if="row.children.length === 0"/>
          <a @click="removeModule(row)" v-if="row.children.length === 0">删除</a>
        </template>
      </tree-table>
    </div>

    <!-- 添加表单 -->
    <Modal
      v-model="dialogShow"
      :title="dialogTitle"
      :mask-closable="false"
      @on-cancel="handleReset('form')">
      <Form ref="form" :model="form" :rules="rules" :label-width="80">
        <FormItem label="父级名称" v-if="dialogTitle === '添加模块'">
          <Input disabled v-model="form.parentName" placeholder="请输入父级名称"/>
        </FormItem>
        <FormItem label="名称" prop="moduleName">
          <Input v-model="form.moduleName" placeholder="请输入模块名称"/>
        </FormItem>
        <FormItem label="类型" prop="type">
          <Select v-model="form.type" placeholder="请选择类型">
            <template v-for="item in moduleTypeOptionList">
              <Option :value="item.dictValue">{{item.dictLable}}</Option>
            </template>
          </Select>
        </FormItem>
        <FormItem label="地址" prop="modulePath" v-if="form.type === '1'">
          <Input v-model="form.modulePath" placeholder="请输入模块地址"/>
        </FormItem>
        <FormItem label="请求方式" prop="httpMethod" v-if="form.type === '1'">
          <Select v-model="form.httpMethod" placeholder="请选择请求方式">
            <template v-for="item in httpMethodOptionList">
              <Option :value="item.dictValue">{{item.dictLable}}</Option>
            </template>
          </Select>
        </FormItem>
        <FormItem label="状态" prop="moduleStatus">
          <Select v-model="form.moduleStatus" placeholder="请选择状态">
            <template v-for="item in statusOptionList">
              <Option :value="item.dictValue">{{item.dictLable}}</Option>
            </template>
          </Select>
        </FormItem>
        <FormItem label="排序" prop="sort">
          <Input v-model="form.sort" type="number" placeholder="请输入排序"/>
        </FormItem>
        <FormItem label="备注" prop="remark">
          <Input v-model="form.remark" type="textarea" placeholder="请输入备注"/>
        </FormItem>
      </Form>
      <!-- 自定义按钮组 -->
      <div slot="footer">
        <Button type="text"  @click="handleReset('form')">取消</Button>
        <Button type="primary"  @click="handleSubmit('form')">确认</Button>
      </div>
    </Modal>

  </div>
</template>

<script>
    import DcyTable from "@/components/dcy/dcy-table";
    import {addModule, deleteBatchModuleById, deleteModuleById, updateModule} from "@/api/admin/module";
    import {noticeError, noticeSuccess} from "@/libs/notice";
    import {getModuleTreeTableList} from "../../api/admin/module";
    import {getDictByType} from "../../api/common";

    export default {
        name: "module-manage",
        components: {DcyTable},
        data() {
            return {
                dialogShow: false,
                dialogTitle: '添加模块',
                selTreeNode: null,
                form: {},
                rules: {
                    moduleName: [this.$ruler('名称')],
                    modulePath: [this.$ruler('地址')],
                    httpMethod: [this.$ruler('方式', 'change')],
                    moduleStatus: [this.$ruler('状态', 'change')],
                    type: [this.$ruler('类型', 'change')]
                },
                columns: [
                    {title: '名称', key: 'moduleName', width: '400px'},
                    {title: '类型', key: 'type', align: 'center', type: 'template', template: 'type', width: '100px'},
                    {title: '地址', key: 'modulePath', align: 'center', width: '300px'},
                    {title: '请求方式', key: 'httpMethod', align: 'center', type: 'template', template: 'httpMethod'},
                    {title: '状态', key: 'moduleStatus', align: 'center', type: 'template', template: 'moduleStatus'},
                    {title: '排序', align: 'center', key: 'sort', width: '80px'},
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        width: '200px',
                        minWidth: '200px',
                        type: 'template',
                        template: 'action'
                    }
                ],
                data: [],
                statusOptionList: [],
                httpMethodOptionList: [],
                moduleTypeOptionList: []
            }
        },
        methods: {
            /**
             * 获取tree列表
             */
            getModuleTreeList() {
                getModuleTreeTableList().then(res => {
                    this.data = res.data;
                })
            },
            /**
             * 修改弹出框
             * @param row
             */
            updModule(row) {
                this.form = {...row};
                this.dialogTitle = '修改模块';
                this.dialogShow = true;
            },
            /**
             * 添加弹出框
             * @param row
             */
            addModule(row) {
                if (row.type === '1') {
                    this.$Notice.error({
                        title: '操作类型下面不可以在添加子节点！'
                    });
                } else {
                    this.selTreeNode = {...row};
                    this.dialogTitle = '添加模块';
                    this.form.parentId = this.selTreeNode.moduleId;
                    this.form.parentName = this.selTreeNode.moduleName;
                    this.form.parentIds = this.selTreeNode.parentIds + ',' + this.selTreeNode.moduleId;
                    this.dialogShow = true;
                }
            },
            /**
             * 提交表单
             * @param name
             */
            handleSubmit(name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if (this.dialogTitle === '添加模块') {
                            addModule(this.form).then(res => {
                                if (res.data) {
                                    noticeSuccess('add')
                                } else {
                                    noticeError('add')
                                }
                                this.cancelDialogAndRefresh()
                            })
                        } else {
                            updateModule(this.form).then(res => {
                                if (res.data) {
                                    noticeSuccess('upd')
                                } else {
                                    noticeError('upd')
                                }
                                this.cancelDialogAndRefresh()
                            })
                        }
                    }
                })
            },
            /**
             * 删除
             * @param row
             */
            removeModule(row) {
                this.$Modal.confirm({
                    title: '您确认删除这条内容吗？',
                    onOk: () => {
                        deleteModuleById(row.moduleId).then(res => {
                            if (res.data) {
                                noticeSuccess('del')
                            } else {
                                noticeError('del')
                            }
                            // 刷新表格
                            this.getModuleTreeList();
                        })
                    }
                });
            },
            /**
             * 重置表单
             * @param name
             */
            handleReset(name) {
                this.form = {};
                this.dialogShow = false;
                this.$refs[name].resetFields()
            },
            /**
             * 关闭弹出框 和 刷新表格
             */
            cancelDialogAndRefresh() {
                // 关闭弹出框 和 清空表单
                this.handleReset('form');
                // 刷新表格
                this.getModuleTreeList();
            },
        },
        mounted() {
            this.getModuleTreeList();
            getDictByType('status').then(res => {
                this.statusOptionList = res.data;
            });
            getDictByType('module_type').then(res => {
                this.moduleTypeOptionList = res.data;
            })
            getDictByType('http_method').then(res => {
                this.httpMethodOptionList = res.data;
            })
        }
    }
</script>

<style scoped>

</style>
